<template>
    <view class="page-wrap">
        <view class="create">
            <u-form :model="form" ref="uForm" label-width="6em">
                <u-form-item border-bottom label="姓名" prop="name">
                    <u-input placeholder="请输入姓名" v-model="form.name" />
                </u-form-item>
                <u-form-item border-bottom label="联系电话" prop="mobile">
                    <u-input placeholder="请输入联系电话" v-model="form.mobile" />
                </u-form-item>
                <u-form-item border-bottom label="学校" prop="schoolId" @click="toSchool">
                    <u-input type="select" placeholder="请选择学校" v-model="form.schoolName" disabled />
                    <u-icon slot="right" name="arrow-right" />
                </u-form-item>
                <u-form-item border-bottom label="楼栋" prop="buildingId" @click="buildingShow = true">
                    <u-input type="select" placeholder="请选择楼栋" v-model="form.buildingName" disabled />
                    <u-picker v-if="buildingShow" :show="buildingShow" :columns="buildingList" :defaultIndex="buildingIndex"
                        @confirm="handleBuilding" key-name="label" @cancel="buildingShow = false" />
                    <u-icon slot="right" name="arrow-right" />
                </u-form-item>
                <u-form-item border-bottom label="宿舍/门牌" prop="address">
                    <u-input placeholder="请输入宿舍/门牌" v-model="form.address" />
                </u-form-item>
                <u-form-item border-bottom label="设为默认" prop="def">
                    <u-switch slot="right" v-model="form.def" :active-value="1" :inactive-value="0" :size="32" />
                </u-form-item>
            </u-form>
        </view>
        <view class="btn-submit">
            <u-button shape="circle" type="primary" @click="handleSave">保　存</u-button>
        </view>
    </view>
</template>

<script>
    import {
        mapState
    } from 'vuex';
    export default {
        data() {
            return {
                list: [],
                option: {
                    size: 15, // 分页大小
                    auto: true // 自动加载列表
                },
                buildingShow: false,
                buildingList: [
                    []
                ],
                buildingIndex: [1],
                form: {
                    id: '',
                    name: '',
                    mobile: '',
                    schoolId: '',
                    schoolName: '',
                    buildingId: '',
                    buildingName: '',
                    address: '',
                    def: 0,
                }
            };
        },
        computed: {},
        methods: {
            toSchool() {
                this.$toPage({
                    url: '/pages/main/school',
                    params: {
                        event: 'dormitorySchoolChange'
                    }
                });
            },
            loadBuilding() {
                this.$api.area.buildingList({
                    schoolId: this.form.schoolId
                }).then(res => {
                    console.log('loadBuilding')
                    this.buildingList = [res.buildingList];
                    if (!this.form.buildingId) {
                        return;
                    }
                    let index = res.buildingList.findIndex((l, index) => {
                        return res.buildingList[index].id === this.form.buildingId;
                    })
                    if (index > -1) {
                        this.buildingIndex = [index];
                    }
                })
            },
            handleBuilding(e) {
                console.log('handleBuilding', arguments)
                this.form.buildingId = e.value[0].id;
                this.form.buildingName = e.value[0].label;
                this.buildingShow = false;
            },
            handleSave() {
                uni.showModal({
                    title: '提示',
                    content: '确定提交修改内容吗？',
                    success: (res) => {
                        if (res.confirm) {
                            console.log('save address', this.form)
                            this.$api.dormitory.edit({
                                ...this.form,
                                def: this.form.def ? 1 : 0,
                            }).then(res => {
                                uni.showModal({
                                    title: '提示',
                                    content: '保存成功！',
                                    showCancel: false,
                                    success: (res) => {
                                        this.$toPage({
                                            type: 'back'
                                        });
                                    }
                                });
                            })
                        }
                    }
                });
            }
        },
        watch: {
            'form.expressCodes'(val = '') {
                console.log('watch handleCodes', arguments)
                this.form.expressCodes = val.replace(/\s/g, '').replace(/，/g, ',')
            }
        },
        onLoad(option) {
            if (option.id) {
                this.$api.dormitory.info({
                    addressId: option.id
                }).then(res => {
                    Object.entries(res.info).forEach(([key, val]) => {
                        if (this.form[key] !== undefined) {
                            this.form[key] = val;
                        }
                    });
                    this.loadBuilding();
                })
            }
            uni.$on('dormitorySchoolChange', info => {
                console.log('dormitorySchoolChange：', info);
                if (!info) return;
                this.form.schoolId = info.id;
                this.form.schoolName = info.label;
                this.loadBuilding();
            })
        },
        onShow() {},
        onHide() {},
        onUnload() {},
        onReachBottom() {},
        onPageScroll(event) {},
        onPullDownRefresh() {},
        onShareAppMessage(options) {}
    };
</script>

<style scoped lang="scss">
    .page-wrap {
        min-height: 100vh;

        .create {
            padding: 32rpx;
            margin-bottom: 100rpx;
            background-color: #fff;
        }

        .btn-submit {
            margin: 32rpx
        }
    }
</style>